<template>
  <v-app>
    <NuxtPwaManifest/>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
    <NuxtSnackbar />
    <ModalsContainer/>
<!--    <v-fab
icon="mdi-theme-light-dark" variant="outlined" app absolute location="bottom end" appear
           @click="toggleTheme()"/>-->
  </v-app>
</template>
<script setup lang="ts">
import {useThemeStore} from "~/stores/theme-store";
import {ModalsContainer} from "vue-final-modal";
const themeStore = useThemeStore();
const themeInstance = useTheme();
const {locales,setLocale} = useI18n();
const toggleTheme = () => {
  useExchangeTheme("customTheme");
  useExchangeLang('en');
}

const useExchangeLang = (lang: string) => {
  const existLocales = locales.value.filter(i => i.code === lang);
  if (!existLocales) {
    return;
  }
  const existLocale = existLocales.pop();
  if (!existLocale) {
    return;
  }
  setLocale(existLocale.code);
}
const useExchangeTheme = (theme: string) => {
  themeInstance.global.name.value = theme;
  themeStore.setTheme(theme);
}
</script>
